<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>

    <!-- 加载layui框架样式 -->
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/person-center/person.css">
    <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../../css/nav/nav.css">
    <link rel="stylesheet" href="../../css/user/bootstrap.css">
    <link rel="stylesheet" href="../../css/person-center/animate.css">
    <link rel="stylesheet" href="../../css/person-center/style.css">

</head>

<body>
    <!-- 响应式导航 begin -->
    <div class="layui-header header header-index">
        <a class="logo" href="../../index.html">
            KeepMoving
        </a>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
            <li class="layui-nav-item ">
                <a href="../plan/plan-index.html">训练计划</a>
            </li>
            <li class="layui-nav-item"><a href="../action/fit-action.html">健身动作</a></li>
            <li class="layui-nav-item"><a href="../food/food.html">饮食健康</a></li>
            <li class="layui-nav-item "><a href="../user/login.html">登录</a></li>
            <li class="layui-nav-item ">
                <a href="../user/register.html">注册</a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="javascript:;"><img src="../../imgs/person-center/girl.jpg" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="../person/person-center.html">个人中心</a></dd>
                    <dd><a href="../person/person-info-profile.html">账号设置</a></dd>
                    <dd><a href="">退出账号</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <!-- 响应式导航 end -->


    <div class="layui-container">
        <div class="layui-row">
            <!-- 个人信息开始 -->
            <div class="person">
                <div class="person-img">
                    <img src="../../imgs/person-center/person-img.jpg" alt="个人头像">
                </div>
                <div class="person-name">
                    <span>平凡之路</span>
                    <i class="fa fa-mars" aria-hidden="true"></i>
                </div>
                <div class="person-intro">
                    <p>人生有梦,各自精彩</p>
                </div>
            </div>
            <!-- 个人信息结束 -->

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">正在训练</li>
                    <li>训练记录</li>
                    <li>个人数据</li>
                    <li>个人动态</li>
                    <li>我的评论</li>
                    <li>我的点赞</li>

                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <!-- 正在训练开始 -->
                    <div class="layui-tab-item layui-show">
                        <div class="fit-plan">
                            <div class="plan-img">
                                <img src="../../imgs/person-center/planning.webp" alt="图片加载失败">
                            </div>
                            <div class="plan-title">
                                <span>第一阶段</span>
                                <span>第一天</span>
                                <span>腹部升级训练</span>
                            </div>
                            <a href="#" class="btn-calendar">
                                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="btn-check">
                                <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
                            </a>
                            <div class="plan-target">
                                <p>腹肌唤醒</p>
                            </div>

                            <a href="#" class="plan-start" target="_blank">开始训练</a>
                        </div>
                        <div class="fit-plan">
                            <div class="plan-img">
                                <img src="../../imgs/person-center/planning.webp" alt="图片加载失败">
                            </div>
                            <div class="plan-title">
                                <span>第一阶段</span>
                                <span>第一天</span>
                                <span>腹部升级训练</span>
                            </div>
                            <a href="#" class="btn-calendar">
                                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="btn-check">
                                <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
                            </a>
                            <div class="plan-target">
                                <p>腹肌唤醒</p>
                            </div>

                            <a href="#" class="plan-start" target="_blank">开始训练</a>
                        </div>
                    </div>
                    <!-- 正在训练结束 -->

                    <!-- 训练记录开始 -->
                    <div class="layui-tab-item">
                        <div class="fit-plan">
                            <div class="plan-img">
                                <img src="../../imgs/person-center/planning.webp" alt="图片加载失败">
                            </div>
                            <div class="plan-title">
                                <span>第一阶段</span>
                                <span>第一天</span>
                                <span>腹部升级训练</span>
                            </div>
                            <a href="#" class="btn-calendar">
                                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                            </a>
                            <a href="#" class="btn-check">
                                <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
                            </a>
                            <div class="plan-target">
                                <p>腹肌唤醒</p>
                            </div>
                            <a href="#" class="plan-start" target="_blank">开始训练</a>
                        </div>

                        <a href="../person/fit-record.html" class="fit-more"><span>更多记录</span></a>
                    </div>
                    <!-- 训练记录结束 -->

                    <!-- 个人数据开始 -->
                    <div class="layui-tab-item">
                        <!--健身天数-->
                        <div class="fit-days">
                            <div class="fit-data">
                                <span class="time">10</span>
                                <span class="day">天</span>
                            </div>
                            <p>健身天数</p>
                        </div>

                        <!-- 当前参与计划 -->
                        <div class="data">
                            <div class="join-plan-data" id="plan-data"></div>
                            <p>当前参与计划完成度</p>
                        </div>
                        <!-- 观看视频时长 -->
                        <div class="see-video">
                            <div class="video-time" id="time"></div>
                        </div>
                    </div>
                    <!-- 个人数据结束 -->

                    <!-- 我的足迹开始 -->
                    <div class="layui-tab-item">
                        <div class="wrapper wrapper-content">
                            <div class="row animated fadeInRight">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>最新动态</h5>
                                        </div>
                                        <div class="ibox-content dynamic">
                                            <div>
                                                <div class="feed-activity-list">
                                                    <div class="feed-element dynamic-info">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">1天前</small>
                                                            <span>参加了</span> <strong>六周脱脂训练计划</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>

                                                    <div class="feed-element">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">5小时前</small>
                                                            <span>购买了</span> <strong>那二十年的单身</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary btn-block m"><i
                                                        class="fa fa-arrow-down"></i> 显示更多</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 我的足迹结束 -->

                    <!-- 我的评论开始 -->
                    <div class="layui-tab-item">
                        <div class="wrapper wrapper-content">
                            <div class="row animated fadeInRight">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>我的评论</h5>
                                        </div>
                                        <div class="ibox-content dynamic">
                                            <div>
                                                <div class="feed-activity-list">
                                                    <div class="feed-element dynamic-info">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">1天前</small>
                                                            <span>参加了</span> <strong>六周脱脂训练计划</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>

                                                    <div class="feed-element">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">5小时前</small>
                                                            <span>购买了</span> <strong>那二十年的单身</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary btn-block m"><i
                                                        class="fa fa-arrow-down"></i> 显示更多</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 我的评论结束 -->

                    <!-- 我的点赞开始 -->

                    <div class="layui-tab-item">
                        <div class="wrapper wrapper-content">
                            <div class="row animated fadeInRight">
                                <div class="col-sm-12">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-title">
                                            <h5>我的点赞</h5>
                                        </div>
                                        <div class="ibox-content dynamic">
                                            <div>
                                                <div class="feed-activity-list">
                                                    <div class="feed-element dynamic-info">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">1天前</small>
                                                            <span>参加了</span> <strong>六周脱脂训练计划</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>

                                                    <div class="feed-element">
                                                        <a href="#" class="pull-left">
                                                            <img alt="image" class="img-circle"
                                                                src="../../imgs/person-center/girl.jpg">
                                                        </a>
                                                        <div class="media-body ">
                                                            <small class="pull-right text-navy">5小时前</small>
                                                            <span>购买了</span> <strong>那二十年的单身</strong>.
                                                            <br>
                                                            <small class="text-muted"><a href="#">点击查看</a></small>
                                                        </div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary btn-block m"><i
                                                        class="fa fa-arrow-down"></i> 显示更多</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 我的点赞结束 -->


                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts-en.common.js"></script>
    <script src="../../plugins/layui/layui.js"></script>
    <script src="../../js/nav/nav.js"></script>
    <script src="../../js/person-center/person-center.js"></script>
    <script src="../../js/user/login.js"></script>
</body>

</html>